<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common"></div>
    <link rel="stylesheet" th:href="@{/static/css/login.css}" media="all"/>
    <style>
        .center {
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 3px;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 10px;
            margin-top: 3px;
        }
    </style>
</head>
<body class="center">

<div style="display: flex; align-items: center;">
    <form class="center" action="/service/SelectContent" method="post"
          style="display: flex; align-items: center; margin-right: 10px;">
        <input class="btn btn-sm btn-primary" type="submit" style="margin-right: 10px;" value="查询">
        <input type="text" name="content" class="form-control" placeholder="请输入搜索关键字">
    </form>
</div>

<table class="table table-striped table-bordered table-hover table-condensed">
    <tr class="success">
        <td>ID</td>
        <td>服务名称</td>
        <td>金额</td>
        <td>详情</td>
        <td>图片</td>
        <td>创建时间</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    <tr th:each="service:${pageInfo.list}">

        <td th:text="${service.id}"></td>
        <td th:text="${service.name}"></td>
        <td th:text="${service.money}"></td>

        <td>
            <a class="btn btn-xs btn-success" th:onclick="showServiceContent([[${service.content}]])">详情</a >
        </td>

        <td><img width="40px" height="20px" th:src="|/pic/${service.image}|"></td>
        <td th:text="${#dates.format(service.createTime, 'yyyy-MM-dd hh:mm')}"></td>
        <td>
            <!-- recordvos为当前登录用户的消费记录表 -->
            <span th:each="recordvo:${recordvos}">
                <span class="label label-warning" th:if="${recordvo.serviceId==service.id}">已选择</span>
            </span>
        </td>
        <td>
            <button class="btn btn-xs btn-primary" th:id="'selectBtn_' + ${service.id}" th:text="'选择'"
                    th:attr="data-service-id=${service.id}"></button>
        </td>
    </tr>
</table>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-sm">
        <!--上一页-->
        <th:block th:if="${pageInfo.pageNo==1}">
            <li class="disabled">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
        </th:block>
        <th:block th:if="${pageInfo.pageNo!=1}">
            <li>
                <a th:href="|/record/selectByLoginCustom?pageNo=${pageInfo.pageNo-1}|" aria-label="Previous">
                    <!--<span aria-hidden="true">&laquo;</span>-->
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
        </th:block>

        <li th:if="${pageInfo.totalPage>=1}" th:class="${pageInfo.pageNo==page}?active:''" th:each="page:${#numbers.sequence(1, pageInfo.totalPage)}">
            <!--<a th:href="|${pageInfo.pageNo==page?'#':'/user/selectByPage?pageNo=${page}'}|" th:text="${page}"></a>-->
            <th:block th:if="${pageInfo.pageNo==page}">
                <a href="#" th:text="${page}"></a>
            </th:block>
            <th:block th:if="${pageInfo.pageNo!=page}">
                <a th:href="|/record/selectByLoginCustom?pageNo=${page}|" th:text="${page}"></a>
            </th:block>
        </li>

        <!--下一页-->
        <th:block th:if="${pageInfo.pageNo==pageInfo.totalPage}">
            <li class="disabled">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </th:block>
        <th:block th:if="${pageInfo.pageNo!=pageInfo.totalPage}">
            <li>
                <a th:href="|/record/selectByLoginCustom?pageNo=${pageInfo.pageNo+1}|" aria-label="Next">
                    <!-- <span aria-hidden="true">&raquo;</span>-->
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </th:block>
    </ul>
</nav>
<script>
    /*function toselectcourse(id) {
        layer.confirm('您确认选择此课程嘛?', function () {
            location.href = '/record/toselectcourse?id=' + id;
        })
    }*/

    function showServiceContent(content) {
        layer.open({
            type: 1,
            area: ['1000px', '450px'],
            content: content
        })
    }


    $(document).ready(function () {
        $('button[id^="selectBtn_"]').click(function () {
            var serviceId = $(this).data('service-id');
            checkIfChosen(serviceId, this);
        });

        function checkIfChosen(serviceId, button) {
            $.ajax({
                url: '/record/selectIfChoose', // 假设这是你的后端接口URL
                type: 'GET',
                data: {id: serviceId},
                success: function (response) {
                    if (response === 1) {
                        //$(button).hide(); // 如果已选择，隐藏按钮
                        alert('该服务已被您选择！');
                    }
                    else if (response === 3) {
                        alert('很抱歉, 您的余额不足！');
                    }
                    else {

                        // 这里可以添加选择课程的逻辑，比如再次确认或直接发送请求
                        layer.confirm('您确认要选择此服务嘛?', function () {
                            location.href = '/service/toSelectService?id=' + serviceId;
                        });
                    }
                },
                error: function () {
                    alert('请求失败，请稍后再试！');
                }
            });
        }
    });

</script>
</body>
</html>